<template>
  <div>
    <div ref="echart" :style="`width:${box.width};height:${box.height};`"></div>
  </div>
</template>

<script>
import func from '@/assets/js/func.js'

export default {
  // mounted() {
  //   // 请求返回数据后  不推荐使用vue set变量
  //   this.$nextTick().then(() => {
  //     this.init()
  //   })
  // },
  data () {
    return {
      setInt: ''
    }
  },
  computed: {
    dates () {
      return func.forwardDate(true)
    }
  },
  watch: {
    'params.outStorageInfo' () {
      this.$nextTick().then(() => {
        this.init()
      })
    }
  },
  props: ['params', 'box'],
  methods: {
    init () {
      
      let [rdate, cdate, echart] = [[...this.dates], [...this.dates], this.$echarts.init(this.$refs["echart"])]
      rdate = rdate.map(i => 0)
      cdate = cdate.map(i => 0)
      this.dates.map((item, index) => {
        this.params.storageInfo.map(toitem => {
          if (toitem.statisDay.indexOf(item) != -1) rdate[index] = toitem.storageNum
        })
        this.params.outStorageInfo.map(toitem => {
          if (toitem.statisDay.indexOf(item) != -1) cdate[index] = toitem.storageNum
        })
      })
      
      echart.setOption({
        backgroundColor: 'rgba(19,22,41,0.6)',
        title: {
          text: '出入库量对比分析（近30日）',
          textStyle: {
            color: '#32FAF8',
            fontWeight: 'lighter',
            fontSize: 14,
          },
          left: 10,
          top: 10
        },
        tooltip: {
          trigger: 'axis'
        },
        color: func.allColor(),
        legend: {
          top: 10,
          data:[{name: '入库量', icon: 'roundRect', textStyle: {color: '#fff'}},{name: '出库量', icon: 'roundRect', textStyle: {color: '#fff'}}]
        },
        dataZoom: {
          type: 'slider',
          start: 0,
          end: 50
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '15%',
          containLabel: true
        },        
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: this.dates,
          axisLabel: {
            color: '#919CA7',
            rotate: 60
          },
          axisLine:{
            lineStyle: {
              color: '#919CA7'
            }
          }
        },
        yAxis: {
          type: 'value',
          axisLabel: {
            color: '#919CA7'
          },
          axisLine:{
            lineStyle: {
              color: '#919CA7'
            }
          },
          splitLine:{
            show: true,
            lineStyle:{
              color:['rgba(255,255,255,0.2)']
            }
          }
        },
        series: [
          {
            name:'入库量',
            type:'line',
            smooth: true,
            showSymbol: false,                
            areaStyle: {
              color: func.allColor(0),
              opacity: 0.5
            },
            data: rdate
          },
          {
            name:'出库量',
            type:'line',
            smooth: true,
            showSymbol: false,                
            areaStyle: {
              color: func.allColor(1),
              opacity: 0.5
            },
            data: cdate
          }
        ]
      })
      let appIndex = -1
      this.setInt && clearInterval(this.setInt)
      
      this.setInt = setInterval(() => {
        
        let dataLen = rdate.length
        echart.dispatchAction({
          type: 'downplay',
          seriesIndex: 0,
          dataIndex: appIndex
        })
        appIndex = (appIndex + 1) % dataLen
        setTimeout(() => {
          echart.dispatchAction({
            type: 'showTip',
            seriesIndex: 0,
            dataIndex: appIndex
          })
        }, 50)

        let start = 100 / dataLen * (appIndex - 1)
        echart.dispatchAction({
          type: 'dataZoom',
          // 开始位置的百分比，0 - 100
          start: start >50 ? 50 : start,
          // 结束位置的百分比，0 - 100
          end: start > 50 ? 100 : start + 50
        })
      }, 1000)
    
      
    }
  }
};
</script>
